<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>12.layui表单-组装美化-03</title>
        <link rel="stylesheet" href="static/layui-2.5.6/css/layui.css">
    </head>
    <body>
        <div class="layui-container">
            <!-- 提示按钮 -->
            <div class="layui-row layui-col-lg-offset2 layui-col-lg8">
                <button class="layui-btn-fluid layui-btn-primary layui-btn-gray layui-btn-lg">form表单</button>
            </div>
            <hr class="layui-bg-orange"/>
            <hr class="layui-bg-orange"/>
            <hr class="layui-bg-orange"/>

            <div class="layui-row layui-col-lg-offset2 layui-col-lg8">
                <!-- form表单 -->
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="输入姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 行内表单 -->
                    <div class="layui-form-item">
                        <!-- 外层行内 -->
                        <div class="layui-inline">
                            <label class="layui-form-label">年龄范围</label>
                            <!-- 内层行内 -->
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" name="age_min" placeholder="岁" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <!-- 分割号 -->
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" name="age_max" placeholder="岁" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline" style="width: 80px;">
                                <input type="password" name="" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">强加密</label>
                            <div class="layui-input-inline" style="width: 70px;">
                                <!-- lay-ignore是忽略layui的样式 -->
                                <input type="checkbox" name="switch01" lay-skin="switch" lay-text="开启|关闭">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" required lay-verify="phone" placeholder="输入手机"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 普通下拉框 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">城市</label>
                        <div class="layui-input-block">
                            <select name="city" lay-verify="required">
                                <option value="">请选择一个城市</option>
                                <option value="010">北京</option>
                                <option value="021">上海</option>
                                <option value="0571">杭州</option>
                                <option value="020" selected>广州</option>
                                <option value="028">成都</option>
                                <option value="029" disabled>西安</option>
                            </select>
                        </div>
                    </div>

                    <!-- 下拉框分组 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">爱好</label>
                        <div class="layui-input-block">
                            <!-- lay-verify="required": 必选, lay-search: 开启搜索 -->
                            <select name="hobby" lay-verify="required" lay-search>
                                <!-- 这个必须写 -->
                                <option value="">请选择一个爱好</option>
                                <optgroup label="运动">
                                    <option value="basketball">篮球</option>
                                    <option value="football">足球</option>
                                    <option value="volleyball">排球</option>
                                </optgroup>
                                <optgroup label="游戏">
                                    <option value="dota">dota</option>
                                    <option value="dota2">dota2</option>
                                    <option value="lol">lol</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>

                    <!-- 复选框 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">目的地</label>
                        <!-- layui默认复选框 -->
                        <div class="layui-input-block">
                            <input type="checkbox" name="dist" title="东京" value="tk">
                            <input type="checkbox" name="dist" title="纽约" value="ny">
                            <input type="checkbox" name="dist" title="巴黎" value="pr">
                            <input type="checkbox" name="dist" title="伦敦" value="ld">
                            <input type="checkbox" name="dist" title="柏林" value="bl">
                            <input type="checkbox" name="dist" title="香港" value="hk">
                            <input type="checkbox" name="dist" title="台北" value="tp">
                        </div>
                        <!-- 原始效果 -->
                        <div class="layui-input-block">
                            <!-- lay-skin="primary" 原始效果 -->
                            <input type="checkbox" name="dist" title="北京" lay-skin="primary" value="bj">
                            <!-- 选中 -->
                            <input type="checkbox" name="dist" title="深圳" checked value="sz">
                            <!-- 禁用 -->
                            <input type="checkbox" name="dist" title="雄安" disabled value="xa">
                        </div>
                    </div>

                    <!-- 开关 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">开关</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="aa" lay-skin="switch">
                            <input type="checkbox" name="bb" lay-skin="switch" checked>
                            <!-- lay-text="on|off"设置文本, |分开两个值 -->
                            <input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off">
                            <input type="checkbox" name="cc" lay-skin="switch" checked lay-text="okay~|off--" value="开关">
                            <input type="checkbox" name="dd" lay-skin="switch" checked lay-text="开|关" disabled>
                        </div>
                    </div>

                    <!-- 单选框 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <!-- 需要设置相同的name， 才认为是一组 -->
                            <input type="radio" name="gender" title="男" checked>
                            <input type="radio" name="gender" title="女" checked>
                            <input type="radio" name="gender" title="第三性" disabled>
                        </div>
                    </div>

                    <!-- 文本域 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">自我介绍</label>
                        <div class="layui-input-block">
                            <textarea name="remark" required lay-verify="required" placeholder="请输入自我介绍"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <div class="layui-col-lg2 layui-col-lg-offset5">
                                <button class="layui-btn layui-btn-fluid layui-bg-green">
                                    提交
                                </button>
                            </div>
                            <div class="layui-col-lg2 layui-col-lg-offset3">
                                <button class="layui-btn layui-btn-fluid layui-bg-black">
                                    取消
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <hr class="layui-bg-orange"/>
                <!-- 方框风格 -->
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="输入姓名"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 行内表单 -->
                    <div class="layui-form-item">
                        <!-- 外层行内 -->
                        <div class="layui-inline">
                            <label class="layui-form-label">年龄范围</label>
                            <!-- 内层行内 -->
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" name="age_min" placeholder="岁" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <!-- 分割号 -->
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline" style="width: 100px;">
                                <input type="number" name="age_max" placeholder="岁" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline" pane>
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline" style="width: 80px;">
                                <input type="password" name="" autocomplete="off" class="layui-input">
                            </div>
                            <label class="layui-form-label">强加密</label>
                            <div class="layui-input-inline" style="width: 70px;">
                                <!-- lay-ignore是忽略layui的样式 -->
                                <input type="checkbox" name="switch01" lay-skin="switch" lay-text="开启|关闭">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号</label>
                        <div class="layui-input-block">
                            <input type="text" name="phone" required lay-verify="phone" placeholder="输入手机"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <!-- 普通下拉框 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">城市</label>
                        <div class="layui-input-block">
                            <select name="city" lay-verify="required">
                                <option value="">请选择一个城市</option>
                                <option value="010">北京</option>
                                <option value="021">上海</option>
                                <option value="0571">杭州</option>
                                <option value="020" selected>广州</option>
                                <option value="028">成都</option>
                                <option value="029" disabled>西安</option>
                            </select>
                        </div>
                    </div>

                    <!-- 下拉框分组 -->
                    <div class="layui-form-item">
                        <label class="layui-form-label">爱好</label>
                        <div class="layui-input-block">
                            <!-- lay-verify="required": 必选, lay-search: 开启搜索 -->
                            <select name="hobby" lay-verify="required" lay-search>
                                <!-- 这个必须写 -->
                                <option value="">请选择一个爱好</option>
                                <optgroup label="运动">
                                    <option value="basketball">篮球</option>
                                    <option value="football">足球</option>
                                    <option value="volleyball">排球</option>
                                </optgroup>
                                <optgroup label="游戏">
                                    <option value="dota">dota</option>
                                    <option value="dota2">dota2</option>
                                    <option value="lol">lol</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>

                    <!-- 复选框 -->
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">目的地</label>
                        <!-- layui默认复选框 -->
                        <div class="layui-input-block">
                            <input type="checkbox" name="dist" title="东京" value="tk">
                            <input type="checkbox" name="dist" title="纽约" value="ny">
                            <input type="checkbox" name="dist" title="巴黎" value="pr">
                            <input type="checkbox" name="dist" title="伦敦" value="ld">
                            <input type="checkbox" name="dist" title="柏林" value="bl">
                            <input type="checkbox" name="dist" title="香港" value="hk">
                            <input type="checkbox" name="dist" title="台北" value="tp">
                        </div>
                        <!-- 原始效果 -->
                        <div class="layui-input-block">
                            <!-- lay-skin="primary" 原始效果 -->
                            <input type="checkbox" name="dist" title="北京" lay-skin="primary" value="bj">
                            <!-- 选中 -->
                            <input type="checkbox" name="dist" title="深圳" checked value="sz">
                            <!-- 禁用 -->
                            <input type="checkbox" name="dist" title="雄安" disabled value="xa">
                        </div>
                    </div>

                    <!-- 开关 -->
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">开关</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="aa" lay-skin="switch">
                            <input type="checkbox" name="bb" lay-skin="switch" checked>
                            <!-- lay-text="on|off"设置文本, |分开两个值 -->
                            <input type="checkbox" name="cc" lay-skin="switch" checked lay-text="on|off">
                            <input type="checkbox" name="cc" lay-skin="switch" checked lay-text="okay~|off--" value="开关">
                            <input type="checkbox" name="dd" lay-skin="switch" checked lay-text="开|关" disabled>
                        </div>
                    </div>

                    <!-- 单选框 -->
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <!-- 需要设置相同的name， 才认为是一组 -->
                            <input type="radio" name="gender" title="男" checked>
                            <input type="radio" name="gender" title="女" checked>
                            <input type="radio" name="gender" title="第三性" disabled>
                        </div>
                    </div>

                    <!-- 文本域 -->
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">自我介绍</label>
                        <div class="layui-input-block">
                            <textarea name="remark" required lay-verify="required" placeholder="请输入自我介绍"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div>
                            <div class="layui-col-lg2 layui-col-lg-offset5">
                                <button class="layui-btn layui-btn-fluid layui-bg-green">
                                    提交
                                </button>
                            </div>
                            <div class="layui-col-lg2 layui-col-lg-offset3">
                                <button class="layui-btn layui-btn-fluid layui-bg-black">
                                    取消
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>


        <script src="static/layui-2.5.6/layui.js"></script>
        <script>
            // element是导航, 选项卡需要的组件
            layui.use(['layer', 'form', 'element'], function () {
                var layer = layui.layer,
                    form = layui.form,
                    element = layui.element;

                //监听提交
                form.on('submit(formDemo)', function (data) {
                    layer.msg(JSON.stringify(data.field));
                    return false;
                });
            });
        </script>
    </body>
</html>
